@import "compass";
@import "mixins.scss";

.marketingContainer {
  height: 100%;
  .dialog {
    .buttons {
      margin-bottom: 12px;
      @include justify-content(center);
    }
  }
  .qrCodeDialog {
    text-align: center;
    img {
      width: 130px;
      height: 130px;
      margin: 16px 0;
      background: #1E9FFF;
    }
    .submitInfo {
      width: 142px;
    }
  }
  .marketingTitle {
    font-size: 20px;
    text-align: center;
    margin: 24px 0 48px 0;
  }
  .marketingFeatures {
    @include padding2(0, 24px);
    @include justify-content(space-between);
    .featureEntry {
      width: 134px;
      height: 154px;
      border: 1px solid #ccc;
      font-size: 18px;
      cursor: pointer;
      @include border-radius(6px);
      @include align-items(center);
      @include justify-content(center);
      img {
        margin-top: 16px;
        height: 64px;
        width: 64px;
        object-fit: contain;
      }
    }
  }
  .marketingHeader {
    font-size: 16px;
    height: 72px;
    line-height: 40px;
    .backToMarket {
      color: #1E9FFF;
      cursor: pointer;
    }
  }
}
.addDiscussContainer {
  overflow: auto;
  .chooseAccount,.addDiscussMember {
    width: 260px;
    overflow: auto;
    background: rgb(226,226,226);
    @include flex-shrink(0);
  }
  .assistAccount {
    margin: 12px 0;
  }
  .discussCondation {
    margin: 0 0 12px 24px;
  }
  .maxCount {
    margin: 0 0 24px 24px;
    @include align-items(center);
    .layui-input {
      width: 48px;
      margin: 0 5px;
    }
  }
  .checkSendType {
    margin-left: 12px;
    input {
      margin-left: 12px;
      margin-right: 8px;
      vertical-align: top;
    }
  }
  .quickReplyContainer {
    overflow: auto;
  }
  .subTitle {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .addDiscussMember {
    background: none;
    border: 1px solid #ccc;
    @include padding2(24px, 12px);
    .desc {
      line-height: 20px;
    }
  }
  .inputAccounts {
    height: 160px;
    width: 100%;
    resize: none;
    outline: none;
    font-size: 14px;
    border-color: #ccc;
    @include padding2(8px, 12px);
  }
  .groupName {
    margin: 24px 0 12px 0;
    @include align-items(center);
    input {
      width: 150px;
      margin-left: 6px;
    }
  }
  .confirmContainer {
    text-align: center;
    button {
      width: 68px;
    }
  }
  .freindsList,.groupsList {
    overflow: auto;
    .listItem {
      @include flex-shrink(0);
      padding: 0;
      input[type='checkbox'],input[type='radio'] {
        margin-right: 8px;
        margin-left: 2px;
      }
      &:hover {
        background: none !important;
      }
    }
  }
  .searchGroup {
    margin-bottom: 12px;
  }
  .groupMembersListContainer {
    @include padding-left(20px);
    .searchGroup {
      height: 32px;
      line-height: 32px;
    }
  }
}
.discussDetailContainer {
  border: 1px solid #ccc;
  border-left: 0;
  overflow: auto;
  @include padding4(24px, 12px, 24px, 12px);
  .members {
    height: 257px;
    border: 1px solid #ccc;
    overflow: auto;
    @include border-radius(4px);
    @include flex-shrink(0);
  }
  .sendButtons {
    margin: 12px 0;
    text-align: center;
  }
  .createTabs {
    color: #169BD5;
    .createTab {
      cursor: pointer;
      margin-right: 12px;
      &.activeTab {
        color: #333;
      }
    }
  }
  .detailList {
    overflow: auto;
    @include padding-right(24px);
    button {
      width: 72px;
    }
    .progressHead {
      @include align-items(center);
      margin-bottom: 8px;
      @include padding2(8px, 0);
    }
    .servicesInfo {
      margin-top: 8px;
      .progressDetailInfo {
        margin-top: 12px;
        font-size: 12px;
      }
    }
    .progressBarInfo {
      @include align-items(center);
      .progressPercent {
        margin: 0 24px 0 12px;
      }
    }
    .progressTabs {
      button {
        border-bottom: none;
      }
    }
    .checkedUsers {
      @include padding2(8px, 8px);
      border: 1px solid #ccc;
      .listItem:hover {
        background: none !important;
      }
    }
    .dismissGroup {
      width: 92px;
    }
  }
}
.responseContainer {
  .tips {
    margin: 24px;
  }
  .quickReplies {
    // width: 450px;
    // height: 250px;
    // overflow: auto;
  }
  .sendButtons button {
    width: 72px;
  }
  .detailList {
    @include flex-shrink(0);
    .serviceAvatar {
      width: 40px;
      height: 40px;
      margin-right: 8px;
      background: #169BD5;
    }
    .rightButtons {
      @include justify-content(space-between);
    }
    .dismissGroup {
      width: 72px;
      margin-left: 10px;
      margin-bottom: 8px;
    }
  }
  .keywordLabel {
    margin: 16px 0;
  }
  .chooseGroup {
    @include align-items(center);
    @include justify-content(space-between);
  }
  .groupList {
    margin: 16px 0;
    border: 1px solid #ccc;
    @include padding2(24px, 24px);
    @include flex-wrap(wrap);
    @include align-content(flex-start);
    .listItem {
      input[type='checkbox'] {
        margin-right: 8px;
        margin-left: 0;
      }
      &:hover {
        background: none !important;
      }
    }
  }
  .keywordGroups {
    .userGroupInfo {
      width: 340px;
      @include justify-content(space-between);
      @include align-items(center);
      .userStatus {
        margin-bottom: 8px;
      }
    }
  }
}
